<template>
  <div ref="si-step" class="si-step">
    <!-- 拷贝如下内容 开始 -->
    <el-row v-if="type === '1'" class="el-steps-1">
      <el-col
        v-for="(item, i) in title"
        :key="i"
        :style="'width:' + 100 / title.length + '%'"
        :class="i === active ? 'is-process' : i < active ? 'is-success' : ''"
      ><div class="grid-content">{{ item }}</div>
        <i
          class="arrow"
        /></el-col>
    </el-row>
    <el-steps
      v-if="type === '2'"
      :active="active"
      align-center
      finish-status="success"
      class="el-steps-2"
    >
      <el-step v-for="(item, i) in title" :key="i" :title="item" />
    </el-steps>
    <el-steps
      v-if="type === '3'"
      :active="active"
      align-center
      finish-status="success"
      class="el-steps-3"
    >
      <el-step v-for="(item, i) in title" :key="i" :title="item" />
    </el-steps>
    <!-- 拷贝内容 结束 -->
  </div>
</template>

<script>
export default {
  name: 'SiStep',
  props: {
    type: {
      type: String,
      default: '1'
    },
    title: {
      type: Array,
      default() {
        return ['第一步', '第二步', '第三步']
      }
    },
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';
.si-step {
  padding: 20px 0;
  /deep/ .el-step__icon {
    width: 38px;
    height: 38px;
    border: none !important;
    background: #999999;
  }
  /deep/ .el-step__icon-inner {
    color: #fff;
  }
  /deep/ .el-step.is-horizontal .el-step__line {
    top: 18px;
    background: #e5e5e5;
  }

  /deep/ .is-process {
    .el-step__icon {
      background: $light-blue;
    }
  }
  /deep/ .is-success {
    .el-step__icon {
      background: #333333;
    }
    .el-step__line {
      background: #999 !important;
      border-color: #999 !important;
    }
  }
  /deep/ .el-step__title {
    font-size: 12px;
    &.is-success,
    &.is-process {
      font-weight: normal;
      color: #333;
    }
  }
  /* el-steps-1 */
  .el-steps-1 {
    overflow: hidden;
  }
  .el-steps-1 .el-col {
    position: relative;
  }
  .el-steps-1 .grid-content {
    height: 38px;
    line-height: 38px;
    background: #e9e9e9;
    color: #999999;
    font-size: 12px;
    text-align: center;
  }
  .el-steps-1 .el-col .arrow {
    display: block;
    height: 38px;
    width: 20px;
    line-height: 38px;
    overflow: hidden;
    position: absolute;
    left: 100%;
    top: 0px;
  }
  .el-steps-1 .el-col .arrow::before {
    content: '';
    width: 56px;
    height: 56px;
    position: absolute;
    z-index: 1;
    right: 11px;
    top: -9px;
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg); /*兼容-webkit-引擎浏览器*/
    -moz-transform: rotate(45deg); /*兼容-moz-引擎浏览器*/
  }
  .el-steps-1 .el-col .arrow::after {
    content: '';
    width: 56px;
    height: 56px;
    position: absolute;
    z-index: 2;
    right: 13px;
    top: -9px;
    background: #e9e9e9;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg); /*兼容-webkit-引擎浏览器*/
    -moz-transform: rotate(45deg); /*兼容-moz-引擎浏览器*/
  }
  .el-steps-1 /deep/ .el-col.is-process .grid-content,
  .el-steps-1 /deep/ .el-col.is-success .grid-content {
    background: $light-blue;
    color: #fff;
  }
  .el-steps-1 /deep/ .el-col.is-process .arrow::after,
  .el-steps-1 /deep/ .el-col.is-success .arrow::after {
    background: $light-blue;
  }
  /* el-steps-2 */
  .el-steps-2 {
    padding: 20px 0;
    border-bottom: 2px solid #e5e5e5;
    .el-step {
      text-align: center;
      /deep/ .el-step__line {
        top: 100% !important;
        left: 0px !important;
        right: 0px !important;
        display: block !important;
        margin-top: 20px;
      }
    }
    /deep/ .el-step__head {
      width: auto;
      display: inline-block;
      margin-right: 10px;
      position: static;
    }
    /deep/ .el-step__main {
      width: auto;
      display: inline-block;
    }
    /deep/ .is-process {
      .el-step__line {
        background: $light-blue !important;
        border-color: $light-blue !important;
      }
    }
    /deep/ .is-success {
      .el-step__line {
        background: #e5e5e5 !important;
        border-color: #e5e5e5 !important;
      }
    }
  }
}
</style>
